Даже во сне думаешь о UI/UX, реализуешь адаптивность, отзывчивость, тестируешь на всех разрешениях, потом открываешь супер популярный сайт и не можешь до конца меню пролистать, свою станцию выбрать, потому что экран кончился, а меню уходит ниже...

#ux

Эван думает так же

#ai

Книжки

Общеполезное

The Pragmatic Programmer by Andrew Hunt and David Thomas
Code Complete by Steve McConnell

Coding

Clean Code by Robert C. Martin
Refactoring by Martin Fowler

Software Architecture

Designing Data-Intensive Applications by Martin Kleppmann
Object-Oriented Analysis and Design with Applications by Grady Booch

Design Patterns

Design Patterns by Eric Gamma and Others
Domain-Driven Design by Eric Evans

Data Structures and Algorithms

Introduction to Algorithms by Cormen, Leiserson, Rivest, and Stein
Cracking the Coding Interview by Gayle Laakmann McDowell

#learning #book

Дожили

В Chrome 135 появилась возможность стилизовать нативный <select>

Теперь сайт Аэроэкспреса пофиксят...

#chrome #css

Большой обзор rich text editors для встраивания в свой фронт

#editor #lib

В конце прошлого года маленькие любители атомарного CSS помогли владельцу Tailwind Адаму Уэтену въехать вот в этот новый домик.

Платные продукты и услуги, связанные c Tailwind , приносят Адаму несколько миллионов долларов в год

#tailwind

В CSS есть @scope функция, ограничивающая область применения стилей:

<template>
  <div class="box">
    <button class="button">Click me</button>
  </div>
</template>

<style>
  @scope (.box) {
    .button {
      color: red;
    }
  }
</style>

Однако полной замены Vue scoped она не может дать. Например, потому, что если компонент выше вывести списком, то во Vue у каждого будет свой data атрибут и своя область видимости стилей, а у @scope всё смешается

Но для ванильных случаев это полезное нововведение

#css

Глубокое клонирование реактивных объектов в Vue 3

Vue 3 использует Proxy для реактивности, что создает проблемы при попытке клонировать объекты. Стандартные методы работают не так, как ожидается:

const state = reactive({ user: { name: "Al" } });

// Проблемы:
const badCopy1 = { ...state }; // сохраняет Proxy-ссылки
const badCopy2 = JSON.parse(JSON.stringify(state)); // теряет методы и Proxy

3 рабочих способа

1. Комбинация toRaw + structuredClone

import { toRaw } from 'vue';

const original = reactive({ data: 123 });
const copy = structuredClone(toRaw(original));

2. Ручное глубокое копирование

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  const clone = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    clone[key] = deepClone(obj[key]);
  }
  return clone;
}

const copy = reactive(deepClone(toRaw(original)));

3. Библиотечные решения

import { cloneDeep } from 'lodash-es';
const copy = reactive(cloneDeep(toRaw(obj)));

#tip #reactivity

Пятничная клубничка

Стартап Argil предлагает загрузить видео себя (или не себя) и создать такого вот клоника для OnlyFans

#ai

Хорошая библиотека Ark-ui, но с особенностями. Особенно у "выпадашки" HoverCard (для меню которая)

Долго мучился с расположением при динамично меняющемся таргет элементе - все как-то через одно место криво работало. Решил поставить :key на HoverCard и инкрементить его при апдейтах - и всё сразу заработало как надо. Ну, ё-моё...

Немного радует, что довольно часто обновляется и фиксят баги.

P.S. Ререндеринг через `:key` - плохая практика. Последний вариант.

#lib #arkui